jQuery, SOAP, Ajax and updated UI for workflow

New UI, with jquery actions

To enable the toolbar in the tempo task list, edit the tempo-ui-fw.xml in the config folder and set the following:

<property name=”useToolbarIcons” value=”true”/>

This will tell the UI to load the optional icons as seen in the screenshot below:

• Delete: delete the tasks from the task list, and also completely from the database. This has been asked when the process had failed and the task was not relevant anymore for the process
• Claim/Revoke: this takes ownership of the task, and prevent the task from showing up into other users task list. Revoke does the opposite, give back the ownership, and other users can see and act on the task again. This will almost instantly change the icon related to the task, as shown below:
  

  

• Reassign: You can reassign the task to other users or groups. This also dynamically loads users and roles from the RBAC service in tempo so  you can select from the drop down menus.
  

  

• Skip: Put the task in a skipped state, so that it does not show in the task list anymore, but does not delete from the database either.
• Export: a common place to export to PDF, iCAL, CSV your own tasks.
  

  

Jquery and SOAP

I”ve used the excellent SOAP Plugin for Jquery which had almost everything out of the box ready to use cross site scripting, without which anything ajax won’t work.
I just added a quick forward proxy implementation. What it does it just take the soap request from the client side of the UI, and forward them to any proper remote server, using awefuly simple java code. (Thanks http client)

Add your own actions

The following file in github has all the needed code you would want to add your own custom action. Go ahead and display that google map based on the geolocation of the logged user. The power is yours.

Jquery UI 1.7 has made its way in, so you can use its delicious dialogs and other freebies.

Session Timeout and server disconnect

You can now configure the session timeout, as well as the ajax timeouts, as shown in tempo-ui-fw,xml.

<property name=”sessionTimeout” value=”10″/>  // in minutes
<property name=”ajaxTimeout” value=”10000″/> // in milliseconds

In each case, this will show a dialog just like the one below:

This will also prevent any misplaced client-side action. Here the log in again forces you to log back in again. Of course you could very well, implement your own handlers and custom code, to perform the login through the Token Service, or any other requirements you might have.

The ajax time out, is directly related to the ajax activity, and is used to detect when a server has gone down, and the connection has been lost. This will prevent the client side scripting to send unnecessary requests and over loads the server.

In regular activity, we’ve sligthly added some feedback with a custom ajax loading indicator,designed with webscript lab.

Browser compatibility: IE6,7, Firefox, Safari, Opera

With a little help from my friend, IETester, I’ve gone through quite some extensive testing of the different browser resulting in a, hopefully, better user experience.

I also finally understood how to make those horrible scrollbars disappear in an IE6 internal IFrame, which is by loading not a blank page, but an empty page. Empty is not blank.

and “if actions are stronger than words, why is the pen mightier than the sword?” … (answer here). Anyway, with IE6, I used everything I could find, Swords, pens and empty pages.

Good news in the end, even safari and opera liked it.